iT邦幫忙

2021 iThome 鐵人賽

DAY 21
0
Modern Web

網頁前端基礎&Vue.js系列 第 21

javascript(addEventListener事件處理函式)(DAY21)

  • 分享至 

  • xImage
  •  

這篇文章會介紹addEventListener事件處理函式,它其實和event的監聽事件很像,但是addEventListener有它的方便性和特點,我們趕快來認識吧!

  • addEventListener()事件處理函式

語法: addEventListener("click",func)

  1. "click"為事件處理器(callback),可以放入changeblur等事件,和event的不同在於事件的前面開頭不用加on,像是:onclick,只需使用click
  2. func為要呼叫的函式名稱

addEventListener和event的不同與特點:

  1. event事件都是寫在html元素中,也就等於html和javascript是在一起的,這樣在撰寫程式碼或之後編輯時會比較混亂;而addEventListener則是寫在javascript中去對html元素監聽,html和javascript是分開的,可讀性會比較高
  2. addEventListener可以將html元素同時加入多個監聽事件呼叫多個不同的function函式;而event事件一次都只能使用一個監聽事件和呼叫一個function。

Example

  • 原始的樣子:

https://ithelp.ithome.com.tw/upload/images/20211002/2014022565LHvCryQc.png

  • 變換數值時,自動改變總金額:

https://ithelp.ithome.com.tw/upload/images/20211002/20140225ejNFRLmuOE.png

  • 若為負值,不會變動總金額:

https://ithelp.ithome.com.tw/upload/images/20211002/20140225E0O2Qq8GJW.png

<body style="background-color:antiquewhite">
   台灣臭豆腐$60:<input type="number" id="tofu" value="0" />盤<br />
   韓國起司泡麵$120:<input type="number" id="noodles" value="0" />碗<br />
   總共<span style="color:red" id="subtotal">0</span>元
   <script>
       //script區塊這時候必須放在body區塊的最後面,否則會發生錯誤!
       var tofu = document.getElementById("tofu");
       //var為全域變數,故在function中tofu變數名稱也可以被使用
       var noodles = document.getElementById("noodles");
       tofu.addEventListener("change", total);
       //1.監聽tofu物件是否被觸發
       //2.也可以使用this.addEventListener
       //3.this的意思是目前使用者觸發該事件的物件(元素)
       noodles.addEventListener("change", total);
       //1.監聽noodles物件是否被觸發
       //2.也可以使用this.addEventListener
       function total() {
           var money;
           var x = tofu.value;
           if (x < 0) {
               x = 0;
           }
           //檢查使用者是否輸入負值,若為負值,則將該輸入框的值設定成0
           var y = noodles.value;
           if (y < 0) {
               y = 0;
           }
           money = x * 60 + y * 120;
           //計算$
           document.getElementById("subtotal").innerHTML = money;
       };
   </script>
</body>

補充:在上面這個範例中,若script區塊放在head中,則會發生以下錯誤:
https://ithelp.ithome.com.tw/upload/images/20211002/20140225MR80vX9GMZ.png
因JavaScript 是從上到下進行編譯,故執行時,body中的物件還沒被建立,所以編譯器會找不到,因此發生錯誤。所以需移至body的最後面就可以解決這個問題了!

結語

這篇文章介紹了addEventListener事件處裡函式,也舉了一些例子,像是自動監聽使用者的操作行為,來做相對應的回應等。下一篇會介紹javascript的表單資料處理和驗證!


上一篇
javascript(event)(DAY20)
下一篇
javascript表單資料處理&驗證(DAY22)
系列文
網頁前端基礎&Vue.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言